<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="pragma" content="no-cache"/>
    <meta http-equiv="content-type" content="no-cache, must-revalidate"/>
    <meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT"/>
    <title>事故检查</title>

    <link rel="stylesheet" href="css/my.css">
    <link rel="stylesheet" href="css/nav.css">
    <link href="/front/css/bootstrap.min.css" rel="stylesheet">
    <link href="/end/css/element/index.css" rel="stylesheet">

    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body class="beij">
<div id="wrapper" v-cloak>
    <!-- 头部开始 -->
    <div style="width: 100%; height: 60px; line-height: 60px; background: rgb(100 152 231)">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div style="color: rgb(100 152 231); font-size: 20px;">汽车租赁系统</div>
                </div>
                <div class="col-md-4"></div>
                <div class="col-md-2">
                    <span v-if="user.name" style="color: #eee;">
                        <span style="color: rgb(100 152 231); margin-right: 20px">{{user.name}}</span>
                        <a style="color: #eee;" href="javascript:void(0)" @click="logout">退出</a>
                        <a style="color: #eee;" v-if="isCollect" style="margin-left: 10px" href="collectInfo.html">收藏夹</a>
                    </span>
                </div>
                <div class="col-md-2" style="text-align: right">
                    <a href="/end/page/login.html" target="_blank" style="color: #eee; margin-right: 10px">登录</a>
                    <a href="/end/page/register.html" target="_blank" style="color: #eee;">注册</a>
                </div>
            </div>

        </div>
    </div>
    <!-- 导航开始 -->
    <div class="container" style="margin: 5px auto">
        <div style="width: 100%; height: 50px; line-height: 50px;">
            <div class="col-md-12" style="padding: 0">
                <div class="row">
                    <ul style="display: flex;">
                        <li class="nav-item"><a href="index.html">首页</a></li>
                        <li class="nav-item"><a href="advertiserInfo.html">通知管理</a></li>
                        <li class="nav-item"><a href="messageInfo.html">留言板</a></li>
                        <li class="nav-item active"><a href="submitInfo.html">事故检查</a></li>
                        <li class="nav-item"><a href="richtextInfo.html">政策信息宣传</a></li>
                        <li class="nav-item"><a href="cartInfo.html">预约单信息</a></li>
                        <li class="nav-item"><a href="orderInfo.html">订单信息</a></li>
                        <li class="nav-item"><a href="commentInfo.html">评价信息</a></li>

                        <li class="nav-item"><a href="javascript:void(0)" @click="personalPage">个人信息</a></li>
                        <li class="nav-item" v-if="isShow"><a href="/end/page/index.html" target="_blank">进入后台系统</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 导航结束 -->
    <!-- 头部结束 -->
    <div class="container"  style="margin-top: 20px">
        <div class="col-md-12">
            <table class="table table-striped table-bordered table-hover">
                <thead>
                <tr style="background-color: #eee6e6">
                    <th style="width: 50px">ID</th>
					<th>名称</th>
					<th>提交时间</th>
					<th>事故&检查</th>
					<th>审核结果</th>

                </tr>
                </thead>
                <tbody>
                <tr v-for="(data,index) in tableData" :key="data.id">
                    <td>{{data.id}}</td>
					<td>{{data.name}}</td>
					<td>{{data.time}}</td>
					<td>{{data.subreason}}</td>
					<td>{{data.status}}</td>

                </tr>
                </tbody>
            </table>
            <div style="text-align: center;">
                <nav aria-label="Page navigation example">
                    <ul class="pagination">
                        <li class="page-item" :class="{ disabled: preActive }">
                            <a class="page-link" href="javascript:void(0)"
                               @click="loadTable(pageInfo.pageNum - 1)">上一页</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="javascript:void(0)" v-if="pageInfo.pageNum > 1" @click="loadTable(pageInfo.pageNum - 1)">{{pageInfo.pageNum - 1}}</a>
                        </li>
                        <li class="page-item disabled">
                            <a class="page-link" aria-disabled="true" href="javascript:void(0)">{{pageInfo.pageNum}}</a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="javascript:void(0)" v-if="pageInfo.hasNextPage" @click="loadTable(pageInfo.pageNum + 1)">{{pageInfo.pageNum + 1}}</a>
                        </li>
                        <li class="page-item" :class="{ disabled: nextActive }">
                            <a class="page-link" href="javascript:void(0)" @click="loadTable(pageInfo.hasNextPage? (pageInfo.pageNum + 1) : pageInfo.pageNum)">下一页</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        提交信息
                    </div>
                    <div class="panel-body">
                        <form class="form-horizontal">
                            <input type="hidden" v-model="entity.id">
							<div class="form-group">
								<label class="col-sm-3 control-label">名称</label>
								<div class="col-sm-5">
									<input type="text" class="form-control" v-model="entity.name" placeholder="请输入名称">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">提交时间</label>
								<div class="col-sm-5">
									<div class="block">
										<el-date-picker v-model="entity.time" type="datetime" clearable value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间"></el-date-picker>
									</div>
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">事故&检查</label>
								<div class="col-sm-5">
									<input type="text" class="form-control" v-model="entity.subreason" placeholder="请输入事故&检查">
								</div>
							</div>

                            <div v-if="isUpload" class="form-group">
                                <label class="col-sm-3 control-label">上传文件</label>
                                <div class="col-sm-5">
                                    <div style="margin-top: 8px">
                                        <input id="upload-file-id" @change="upload" type="file" ref="file">
                                    </div>
                                </div>
                            </div>
                        </form>
                        <div style="text-align: center">
                            <button type="button" class="btn btn-primary" @click="submit()">提交</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/vue2.6.11/axios.js"></script>
<script src="js/vue2.6.11/vue.min.js"></script>
<script src="/end/js/element/index.js"></script>
<script src="js/my.js"></script>

<script>
    new Vue({
        el: '#wrapper',
        data: {
            user: {},
            isShow: false,

            isUpload: false,
            entity: {},
            tableData: [],
            pageInfo: {},
            preActive: true,
            nextActive: true,
            isCollect: false
        },

        created: function() {
            axios.get('/auth').then(res => {
                if (res.data.code === '0') {
                    this.user = res.data.data;
                    if (this.user.level !== 3) {
                        this.isShow = true;
                    }
                }
            });
            this.loadTable(1);

        },

        methods: {
            loadTable(pageNum) {
                axios.get("/submitInfo/page?pageSize=10&pageNum=" + pageNum).then(res => {
                    if (res.data.code === '0') {
                        this.tableData = res.data.data.list;
                        this.pageInfo = res.data.data;
                        this.preActive = !(this.pageInfo.hasPreviousPage);
                        this.nextActive = !(this.pageInfo.hasNextPage);
                    } else {
                        alert(res.data.msg);
                    }
                });
            },
            upload: function () {
                let files = this.$refs.file.files;
                for (let i = 0; i < files.length; i++) {
                    let formData = new FormData();
                    formData.append('file', files[i]);
                    axios.post('/files/upload', formData, {
                        'Content-Type': 'multipart/form-data'
                    }).then(res => {
                        if (res.data.code === '0') {
                            alert('文件上传成功');
                            this.entity.fileId = res.data.data.id;
                            this.entity.fileName = res.data.data.originName;
                        } else {
                            alert(res.data.msg);
                        }
                    })
                }
            },
            submit() {
                axios.post("/submitInfo", this.entity).then(res => {
                    if (res.data.code === '0') {
                        axios.post('/submitInfo/submit', res.data.data).then(res => {
                            if (res.data.code === '0') {
                                this.entity = {};
                                $('#upload-file-id').val('');
                                alert('提交成功，等待管理员审核，你可以在后台查看审核状态');
                                this.loadTable(1);
                                // // 往submitInfoAdminMap里存一条数据，用来通知管理员审核
                                // let obj = JSON.parse(localStorage.getItem('submitInfoAdminMap'));
                                // if (obj === null) {
                                //     obj = {};
                                // }
                                // let user = JSON.parse(localStorage.getItem('user'));
                                // // 把密码置空，防止用户提交之后，又修改密码，导致信息不一致
                                // user.password = '';
                                // obj[this.entity.id] = JSON.stringify(user);
                                // localStorage.setItem('submitInfoAdminMap', JSON.stringify(obj));
                            } else {
                                alert(res.data.msg);
                            }
                        });
                    } else {
                        alert(res.data.msg);
                    }
                });
            },
            logout() {
                axios.get("/logout").then(res => {
                    if(res.data.code === '0') {
                        location.href = '/front/index.html';
                    } else {
                        msg('error', res.data.msg);
                    }
                })
            }
        }
    })
</script>
</body>
</html>
